import { Stage } from '@inlet/react-pixi'
import { connect, ReactReduxContext } from 'react-redux'
import React from 'react'
import PropTypes from 'prop-types'
import { canvas as canvasDuck } from 'ducks'
import RootContainer from './rootContainer'
import ContextBridge from './context'

class RootStage extends React.Component {
  static propTypes = {
    windowSize: PropTypes.object,
    actionInitItemImage: PropTypes.func.isRequired,
  }

  static defaultProps = {
    windowSize: undefined,
  }

  componentDidMount() {
    const { actionInitItemImage } = this.props
    actionInitItemImage()
  }

  render() {
    const { windowSize } = this.props
    return (
      <ContextBridge
        Context={ReactReduxContext}
        render={children => (
          <Stage
            width={windowSize.w}
            height={windowSize.h}
            options={{ transparent: true, antialias: true }}
          >
            {children}
          </Stage>
        )}
      >
        <RootContainer width={windowSize.w} height={windowSize.h} />
      </ContextBridge>
    )
  }
}

const mapStateToProps = state => ({
  windowSize: canvasDuck.selectors.windowSize(state),
})

const mapDispatchToProps = {
  actionInitItemImage: canvasDuck.creators.actionInitItemImage,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(RootStage)
